import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { useIntersectionObserver } from '@vueuse/core'
// 标签默认重置(浏览器样式统一)
import 'normalize.css'
// 项目公共样式(如：版心类)
import '@/styles/common.less'

import XtXUI from '@/components'
import directivePlugin from '@/directives'

const app = createApp(App)

// 自己封装图片懒加载
app.directive('imglazy', {
  // 指令所在的元素，dom结构被加载完成
  mounted (el, { value }) {
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          el.src = value

          stop()
        }
      }
    )
  }
})

// 使用XtxUI组件库
app.use(XtXUI)
app.use(directivePlugin)
app.use(store)
app.use(router)
app.mount('#app')
